
import React,{ Component } from 'react';
import { DatePicker } from 'antd';

class DatePickers extends Component {
	constructor(props) {
		super(props);
		this.state = {
			startValue: '',
			endValue: '',
			//控制弹层是否展开
			endOpen: '',
		}
	}
	

	onStartChange= (value)=> {
		this.onChange ('startValue',value);
		//console.log('startValue.valueOf',value.valueOf()); //1519133343455
		
	}
	onEndChange=(value)=> {
		this.onChange ('endValue',value);
	}

	onChange (field,value) {
		this.setState({
			[field]: value,
		})
	}
	handleStartOpenChange=(open)=>{
		//open控制弹层是否展开
		if(!open){
			this.setState({
				endOpen: true,
			})
		}
	}
	handleEndOpenChange=(open)=>{
		this.setState({
			endOpen: open,
		})
	}

	//不可选择的日期
	//valueOf()
	disabledStartDate = (startValue)=>{
		console.log('startValue',startValue);
		const endValue = this.state.endValue;
		if(!startValue || !endValue) {
			return false;
		}
		return startValue.valueOf() > endValue.valueOf();
	}
	disabledEndDate = (endValue)=>{
		console.log('endValue',endValue);
		const startValue = this.state.startValue;
		if(!endValue || !startValue ) {
			return false;
		}
		console.log(endValue.valueOf());
		return endValue.valueOf() <= startValue.valueOf();
	}
	render() {
		return (
			<div>
		        <DatePicker
		        	//不可选择的日期
		          	disabledDate={this.disabledStartDate}
		          	//增加时间选择功能
		          	showTime
		          	//展示的日期格式
		          	format="YYYY-MM-DD HH:mm:ss"
		          	value={ this.state.startValue}
		          	placeholder="Start"
		          	//时间发生变化时的回调
		          	onChange={this.onStartChange}
		          	//弹出日历和关闭日历的回调
		          	onOpenChange={this.handleStartOpenChange}
		        />
		        <DatePicker
		          	disabledDate={this.disabledEndDate}
		          	showTime
		          	format="YYYY-MM-DD HH:mm:ss"
		          	value={ this.state.endValue }
		          	placeholder="End"
		          	onChange={this.onEndChange}
		          	//控制弹层是否展开
		          	open={ this.state.endOpen }
		         	onOpenChange={this.handleEndOpenChange}
		        />
	      </div>
		)
	}
}
export default DatePickers;